
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Harvested Land</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<script src="https://js.arcgis.com/3.15/"></script>

<style>
#viewDiv, html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
</style>

<script>
require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "esri/renderers/jsonUtils",
    "dojo/domReady!"
  ],
  function(
    Map, FeatureLayer, rendererJsonUtils
  ) {
    
    var lyr = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_county_crops_2007_clean/FeatureServer/0");

    var map = new Map("viewDiv", {
      basemap: "gray",
      zoom: 5,
      center: [-95, 40],
     });
  
    //Renderer JSON generated from smartMapping module
    var rendererJson = {
      "visualVariables":[
        {
          "type":"colorInfo",
          "field":"M089_07",
          "stops":[
            {
              "value":12,
              "color":[
                255,
                252,
                212,
                255
              ],
              "label":"< 12"
            },
            {
              "value":25,
              "color":[
                231,
                174,
                157,
                255
              ],
              "label":null
            },
            {
              "value":38,
              "color":[
                206,
                96,
                101,
                255
              ],
              "label":"38"
            },
            {
              "value":51,
              "color":[
                136,
                49,
                79,
                255
              ],
              "label":null
            },
            {
              "value":64,
              "color":[
                66,
                2,
                57,
                255
              ],
              "label":"> 64"
            }
          ]
        }
      ],
      "type":"classBreaks",
      "field":"M089_07",
      "defaultSymbol":{
        "color":[
          170,
          170,
          170,
          255
        ],
        "outline":{
          "color":[
            153,
            153,
            153,
            128
          ],
          "width":0.375,
          "type":"esriSLS",
          "style":"esriSLSSolid"
        },
        "type":"esriSFS",
        "style":"esriSFSSolid"
      },
      "minValue":-9007199254740991,
      "classBreakInfos":[
        {
          "symbol":{
            "color":[
              170,
              170,
              170,
              255
            ],
            "outline":{
              "color":[
                153,
                153,
                153,
                128
              ],
              "width":0.375,
              "type":"esriSLS",
              "style":"esriSLSSolid"
            },
            "type":"esriSFS",
            "style":"esriSFSSolid"
          },
          "classMaxValue":9007199254740991
        }
      ],
      "defaultLabel":"Other"
    };
  
    var renderer = rendererJsonUtils.fromJson(rendererJson);
    lyr.setRenderer(renderer);

    map.addLayer(lyr);
  });
</script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>